import React, { useRef, useState, useEffect } from "react";
import { Empty, Spin } from "antd";
import { LeftOutlined, RightOutlined, DragOutlined, DeleteOutlined, ArrowDownOutlined, ShareAltOutlined, ExclamationCircleOutlined } from "@ant-design/icons";
import styled from "styled-components";
import { useNavigate } from "react-router-dom";
import { ThTable } from "@/components/ThTable";
import { rewards } from "../../services/graphql";
import * as antdHelper from "../../utils/antd-helper";
import webconfig from "../../webconfig";
import copy from "copy-to-clipboard";
import store from "../../utils/store";
import { checkLogin } from "../../services/user";

function Main({ className }) {
	const navigate = useNavigate();
	const [isLoading, setIsLoading] = useState(false);
	const [detail, setDetail] = useState({});
	const [isLogin, setIsLogin] = useState(false);

	const init = async parms => {
		setIsLoading(true);
		let ret = await rewards(parms);
		console.log(ret);
		setIsLoading(false);
		if (ret.msg == "ok" && ret.data) {
			setDetail(ret);
		}
		return ret;
	};
	useEffect(() => {
		let yes = checkLogin(navigate);
		if (yes) {
			init({ pagesize:20, pageindex: 1 });
			setIsLogin(yes);
		}
	}, []);
	const prop1 = {
		border: true,
		size: "middle",
		pagesize: 20,
		loadList: {
			method: init
		},
		table: {
			columns: [
				{
					title: "Invited accounts",
					dataIndex: "invitedAccounts",
					key: "invitedAccounts"
				},
				{
					title: "Email",
					dataIndex: "email",
					key: "email"
				},
				{
					title: "Spend",
					dataIndex: "spend",
					key: "spend"
				},
				{
					title: "Reward",
					dataIndex: "reward",
					key: "reward"
				}
			]
		}
	};
	const onCopy = () => {
		let inviteCode = store.get("inviteCode");
		copy("decloud.cess.cloud/login?from=" + inviteCode);
		antdHelper.notiOK("Copied");
	};
	return (
		<div className={className}>
			<Spin spinning={isLoading}>
				<div className="con">
					<div className="banner">
						<div className="btn" onClick={onCopy}>
							<img width={16} src={process.env.PUBLIC_URL + "/img/copy.png"} />
							Copy invite link
						</div>
						<div className="bottom">
							<div className="left">
								<span>{detail.totalRewards}</span>
								<label>Total Reward</label>
							</div>
							<div className="right">
								<span>{detail.discount}</span>
								<label>My discount</label>
							</div>
						</div>
					</div>
					<div className="list">{isLogin ? <ThTable props={prop1} /> : ""}</div>
				</div>
			</Spin>
		</div>
	);
}

export default styled(Main)`
	display: block;
	.con {
		display: flex;
		flex-direction: column;
	}
	.banner {
		height: 140px;
		margin: 20px;
		background-image: url("/img/reward-banner.svg");
		background-repeat: no-repeat;
		background-size: cover;
		border-radius: 20px;
		background-position: center;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #fff;
		.btn {
			width: 140px;
			height: 30px;
			background-color: #333;
			border-radius: 5px;
			line-height: 30px;
			font-size: 13px;
			margin-top: 30px;
			margin-bottom: 20px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			img {
				margin-right: 10px;
			}
		}
		.bottom {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			width: 360px;
			height: 50px;
			.left,
			.right {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 50%;
				span {
					font-size: 18px;
					line-height: 30px;
					font-weight: bold;
				}
				label {
					font-size: 14px;
					line-height: 20px;
				}
			}
		}
	}
	.list {
		width: 100%;
	}
`;
